<template>
  <div
    class="turntable"
    :style="{
      backgroundImage: 'url(' + content.activityBgUrl + ')',
      backgroundSize: '100% 100%',
    }"
  >
    <div class="mark" v-if="showRule || showResult || showSharePage"></div>
    <button @click="back">返回</button>
    <header>
      <button @click="showRuleBtn">活动规则</button>
    </header>
    <main>
      <div
        class="tip"
        :style="{
          backgroundImage: 'url(' + content.countDownBgUrl + ')',
          backgroundSize: '100% 100%',
        }"
      >
        <div v-if="status == 0">
          <span class="tip-title wait"> 即将开启.... </span>
          <p><span>剩余：</span><count-down :time="time"></count-down></p>
        </div>
        <div v-if="status == 1">
          <span class="tip-title start"
            >今天还有<span v-if="lotteryInfoData.lotteryTimes"
              >{{ lotteryInfoData.lotteryTimes }}次</span
            >抽奖机会</span
          >
          <p lotteryInfoData.lotteryTimes>
            已有{{ lotteryInfoData.joinTotalMember }}人参与
          </p>
        </div>
        <div v-if="status == -1">
          <span class="tip-title stop">活动已结束</span>
          <p>已有123456人参与</p>
        </div>
      </div>
      <div
        :style="{
          backgroundImage: 'url(' + content.turnTableBgUrl + ')',
          backgroundSize: '100% 100%',
        }"
      >
        <div class="prize">
          <div
            class="prizeBtn"
            v-for="(prizeItem, prizeIndex) in prize"
            :key="prizeIndex"
            @click="prizeIndex == 4 && status == 1 ? startPrize() : ''"
          >
            <img
              :src="prizeItem.prizeUrl"
              :id="
                prizeItem.id == currentIndex && prizeIndex !== 4
                  ? 'actived'
                  : ''
              "
            />
          </div>
        </div>
      </div>

      <div class="foot">
        <button
          class="lookPrize"
          @click="lookPrize"
          :style="{
            backgroundImage: 'url(' + content.prizeBtnUrl + ')',
            backgroundSize: '100% 100%',
          }"
        ></button>
        <button
          class="sharePrize"
          @click="sharePrize"
          :style="{
            backgroundImage: 'url(' + content.shareBtnUrl + ')',
            backgroundSize: '100% 100%',
          }"
        ></button>
      </div>
      <div class="move-text">
        <transition name="slide" mode="out-in">
          <p class="item-text" :key="moveItem.id">
            {{ moveItem.val }}
          </p>
        </transition>
      </div>
    </main>
    <div v-if="showRule" class="popup-rule">
      <span class="close-popup-rule" @click="closePopupRule">x</span>
      <div class="popup-rule-main">
        <div class="popup-rule-title">活动规则</div>
        <div class="popup-rule-text">
          <ol>
            <li>活动时间：{{ rule.time }}</li>
            <li>
              活动规则：<br /><span class="rule">{{ rule.rule }}</span>
            </li>
            <li>
              奖品发放说明：
              <ul class="explain-list">
                <li v-for="explainItem in rule.explain" :key="explainItem">
                  {{ explainItem }}
                </li>
              </ul>
            </li>
            <li>所有奖品抽完为止</li>
          </ol>
        </div>
      </div>
    </div>
    <div class="result" v-if="showResult">
      <span class="close-popup-result" @click="closeResultBtn">x</span>
      <div class="popup-result-main">
        <div class="title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon--liwu"></use>
          </svg>
        </div>
        <p>中奖啦~恭喜抽中10元花费</p>
        <p>分享活动给好友，即可获得更多抽奖机会</p>
        <div class="foot">
          <button>立即分享</button>
          <button>查看奖品</button>
        </div>
      </div>
    </div>
    <div class="sharePage" v-if="showSharePage">
      <span class="close-popup-sharePage" @click="closesharePageBtn">x</span>
      <div class="popup-showpage-main">
        <p>{{ lotteryInfoData.message }}</p>
        <div
          class="shareBtn"
          :style="{
            backgroundImage: 'url(' + lotteryInfoData.shareBtnUrl + ')',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
          }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import countDown from "@/components/countDown.vue";
import {
  getActivityStatus,
  getRecordList,
  getLotteryInfo,
  getLotteryResult,
} from "@/api/activity.js";
export default {
  name: "turntable",
  components: {
    countDown,
  },
  data() {
    return {
      content: "",
      status: null, //活动状态1--开始；0--即将开始；-1--活动结束
      startTime: "", //new Date(this.$route.params.subject.startTime)
      stopTime: "", //new Date(this.$route.params.subject.endTime)
      time: "",
      currentTime: new Date(), //当前时间
      lotteryInfoData: null,
      prize: [],
      currentIndex: null, //奖开始的索引
      finalIndex: 7, //中奖的索引
      rule: {
        time: "5月21日-6月30日",
        rule: " 每人每日自动获得3次砸金蛋机会。将活动分享给微信好友或微信群额外增加1次抽奖，最多可分享1次。当天完成抽奖，过期机会作废。",
        explain: [
          "优惠券仅限活动商品使用；",
          "优惠券有效期为自获得之日起30日内有效，过期无效；",
          "优惠内容不可与其他优惠叠加使用，不兑现、不找零，优惠金额部分不支持开具发票；",
          " 优惠仅支持线上支付使用，如遇使用问题，请联系客服。",
        ],
      },
      showRule: false, //展示规则弹窗
      showMoveList: true, //展示中奖信息
      moveList: [], //中奖信息
      number: 0,
      showResult: false,
      showSharePage: false,
    };
  },
  computed: {
    moveItem() {
      return {
        id: this.number,
        val: this.moveList[this.number],
      };
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.startMove();
  },
  methods: {
    getData() {
      let params = {
        subjectId: 10113,
        pageSort: 1,
        cityId: 500100,
        channelId: 40002,
      };
      //获取奖品并得到活动状态
      getActivityStatus(params)
        .then((res) => {
          console.log(res);
          this.content = res.data.data.blocks[0].content;
          this.startTime = new Date(res.data.data.subject.startTime);
          this.stopTime = new Date(res.data.data.subject.endTime);
          this.prize = this.content.prizeList;
          let prizeUrl = this.content.doPrizeImgUrl;
          this.prize.forEach((item, index) => {
            if (index == 3) {
              item.id = 7;
            } else if (index == 4) {
              item.id = 3;
            } else if (index == 5) {
              item.id = 6;
            } else if (index == 6) {
              item.id = 5;
            } else if (index == 7) {
              item.id = 4;
            } else {
              item.id = index;
            }
          });
          this.prize.splice(4, 0, { prizeUrl });
          this.isStart();
        })
        .catch((err) => {
          console.log(err);
        });
      let paramsRecord = {
        blockId: 1483,
        cityId: 500100,
        channelId: 40002,
      };
      //抽奖记录
      getRecordList(paramsRecord).then((res) => {
        this.moveList = res.data.data.recordList.map((item) => {
          return "恭喜" + item.nickName + "获得" + item.prizeName;
        });
      });
      // 抽奖次数
      getLotteryInfo(paramsRecord).then((res) => {
        console.log(res);
        //判断抽奖是否结束
        if (res.data.data.isDrawFinish) {
          this.status = -1;
        }
        this.lotteryInfoData = res.data.data;
      });
    },
    // 根据时间差判断活动状态
    isStart() {
      this.time = this.startTime - this.currentTime;
      if (this.currentTime < this.startTime) {
        this.status = 0; //未开始
      } else if (
        this.currentTime >= this.startTime &&
        this.currentTime <= this.stopTime
      ) {
        this.status = 1; //进行中
      } else if (this.currentTime > this.stopTime) {
        this.status = -1; //已结束
      }
      // this.status = -1;
      this.startTime = this.$moment(this.startTime).format("M月D日");
      this.stopTime = this.$moment(this.stopTime).format("M月D日");
    },
    //返回活动页
    back() {
      this.$router.push("/activity");
    },
    // 展示活动规则
    showRuleBtn() {
      this.showRule = true;
    },
    // 关闭活动规则
    closePopupRule() {
      this.showRule = false;
    },
    // 开始抽奖按钮
    startPrize() {
      this.currentIndex = 0;
      this.movePrize(30);
      let params = {
        blockId: 1483,
        cityId: 500100,
        channelId: 40002,
        inputMode: 4,
        sellerType: 4,
        sellerName: "微信小程序",
        sellerId: 10129,
      };
      getLotteryResult(params).then((res) => {
        console.log(res);
      });
    },
    //转盘转动效果实现
    movePrize(time) {
      // 当一格转动时间大于330毫秒时，就转动寻找中奖索引
      if (time > 330) {
        if (this.currentIndex == this.finalIndex) {
          this.popupPrize();
          return;
        }
      }
      //设置定时器，使选中的索引增加且变速增加转动一格的速度
      setTimeout(() => {
        this.currentIndex++;
        this.currentIndex = this.currentIndex % 8;
        this.movePrize(time + time * 0.08); //递归变速
      }, time);
    },
    //中奖结果的弹窗
    popupPrize() {
      // 间隔再展示
      let test = setTimeout(() => {
        this.showResult = true;
      }, 500);
      this.$once(() => {
        clearTimeout(test);
        test = null;
      });
    },
    // 查看奖品
    lookPrize() {},
    // 分享
    sharePrize() {},
    //文字滚动
    startMove() {
      let timer = setTimeout(() => {
        if (this.number === 14) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000);
    },
    closeResultBtn() {
      this.showResult = false;
    },
    closesharePageBtn() {
      this.showSharePage = false;
    },
  },
};
</script>
<style lang="less" scoped>
.turntable {
  overflow: hidden;
  height: 100%;
  button {
    border: none;
    background: none;
    color: #fff;
  }
  header {
    height: 6.25rem;

    button {
      border: none;
      background: #fff;
      color: rgb(128, 128, 128);
      font-size: 0.875rem;
      padding: 0.1875rem 0.5rem;
      border-radius: 0.9375rem;
      position: absolute;
      right: 0.625rem;
      top: 5.3rem;
    }
  }
  main {
    padding: 10px 20px 60px 20px;
    text-align: center;
    .tip {
      overflow: hidden;
      position: relative;
      height: 70px;
      top: -5px;
      .tip-title {
        display: inline-block;
        margin: 5px 0;
      }
      .wait {
        font-weight: bolder;
      }
      .start {
        font-size: 14px;
        span {
          font-size: 20px;
        }
      }
      p {
        color: rgb(128, 128, 128);
        font-size: 13px;
      }
    }
    .prize {
      overflow: hidden;
      padding: 34px 25px 28px 25px;
      margin: 10px 20px;
      display: grid;
      grid-template-columns: repeat(3, 78px);
      grid-template-rows: repeat(3, 80px);
      grid-gap: 5px 5px;
      .prizeBtn {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 90%;
          background: #f9f1e0;
          border-radius: 8px;
        }
      }
      #actived {
        background: #6a1212;
      }
    }
    .foot {
      margin: 0.625rem;
      display: flex;
      justify-content: space-around;
      button {
        border-radius: 20px;
        width: 6.875rem;
        height: 40px;
      }
    }
    .move-text {
      margin: 1.25rem 2.375rem 0.625rem;
      border-radius: 1.25rem;
      font-size: 0.8125rem;
      overflow: hidden;
      background: #f9f1e0;
      .item-text {
        padding: 10px;
        overflow: hidden;
      }
      .slide-enter-active,
      .slide-leave-active {
        transition: all 0.5s linear;
      }
      .slide-leave-to {
        transform: translateY(-20px);
      }
      .slide-enter {
        transform: translateY(20px);
      }
    }
  }
  .popup-rule {
    position: absolute;
    top: 18%;
    right: 0;
    left: 0;
    margin: auto;
    width: 18.75rem;
    height: 27.5rem;
    border-radius: 0.625rem;
    background: #fff;
    overflow: auto;
    z-index: 2;
    .close-popup-rule {
      position: relative;
      left: 92%;
      top: 0.3125rem;
      display: inline-block;
      width: 0.9375rem;
      height: 0.9375rem;
      line-height: 0.9375rem;
      text-align: center;
      border-radius: 50%;
      border: 0.1px solid #000;
      font-size: 0.75rem;
    }
    .popup-rule-main {
      padding: 10px;
      .popup-rule-title {
        text-align: center;
        font-weight: bolder;
        margin: 0.625rem 0;
      }
      .popup-rule-text {
        font-size: 0.75rem;
        padding-left: 1.875rem;
        padding-top: 0.625rem;
        ol {
          li {
            margin: 0.625rem 0;
          }
          .rule {
            display: inline-block;
            text-indent: 0.75rem;
          }
          .explain-list {
            padding-left: 1.25rem;
            li {
              margin: 0.125rem 0;
            }
          }
        }
      }
    }
  }
  .mark {
    background: rgba(0, 0, 0, 0.5) !important;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding-bottom: 40px;
  }
  .result {
    width: 300px;
    height: 250px;
    position: absolute;
    top: 23%;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    z-index: 2;
    .close-popup-result {
      position: relative;
      left: 92%;
      top: 0.3125rem;
      display: inline-block;
      width: 0.9375rem;
      height: 0.9375rem;
      line-height: 0.9375rem;
      text-align: center;
      border-radius: 50%;
      border: 0.1px solid #000;
      font-size: 0.75rem;
    }
    .popup-result-main {
      padding: 0 20px;
      text-align: center;
      .title {
        font-size: 45px;
      }
      p {
        margin: 10px 0;
      }
      p:nth-child(3) {
        color: #ccc;
        font-size: 15px;
      }
      button {
        margin: 10px 15px;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        color: #fff;
      }
      button:nth-child(1) {
        background: #6495ed;
      }
      button:nth-child(2) {
        background: #ff6347;
      }
    }
  }
  .sharePage {
    width: 280px;
    height: 180px;
    position: absolute;
    top: 23%;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    z-index: 2;
    .close-popup-sharePage {
      position: relative;
      left: 92%;
      top: 0.3125rem;
      display: inline-block;
      width: 0.9375rem;
      height: 0.9375rem;
      line-height: 0.9375rem;
      text-align: center;
      border-radius: 50%;
      border: 0.1px solid #000;
      font-size: 0.75rem;
    }
    .popup-showpage-main {
      p {
        text-align: center;
        margin-top: 40px;
      }
      .shareBtn {
        width: 160px;
        height: 43px;
        margin: 0 auto;
        margin-top: 20px;
        background: orange;
        border-radius: 35px;
      }
    }
  }
}
</style>